<template>
  <div class="detail-wrapper">
    <div class="top">
      <el-form
        class="data-form"
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <div class="part">
          <div class="part-top">
            <div class="part-top-item">
              <span class="part-top-item-label">所属园区：</span>
              <span class="part-top-item-value">{{ detailForm.parkName }}</span>
            </div>
            <div class="part-top-item">
              <span class="part-top-item-label">检查场景：</span>
              <span class="part-top-item-value">{{
                detailForm.senceName
              }}</span>
            </div>
            <div class="part-top-item">
              <span class="part-top-item-label">检查点：</span>
              <span class="part-top-item-value">{{
                detailForm.locationDesc
              }}</span>
            </div>
            <div class="part-top-item">
              <span class="part-top-item-label">隐患图片：</span>
              <span class="part-top-item-value">
                <el-image
                  v-if="detailForm.dangerImgFile"
                  class="img"
                  fit="cover"
                  :preview-src-list="[detailForm.dangerImgFile.fileUrl]"
                  preview-teleported
                  :src="detailForm.dangerImgFile.fileUrl"
                />
              </span>
            </div>
            <div class="part-top-item">
              <span class="part-top-item-label">检查时间：</span>
              <span class="part-top-item-value">{{ form.createTime }}</span>
            </div>
          </div>
          <div class="part-form">
            <div
              v-for="(item, index) of recordList"
              :key="index"
              class="content-item"
            >
              <div class="title">
                隐患整改记录{{ recordList.length - index }}
              </div>
              <div class="content-item-part">
                <el-row :gutter="30" style="margin-bottom: 10px">
                  <el-col :span="8">
                    <div class="part-item">
                      <span class="part-item-label">隐患描述：</span>
                      <span class="part-item-value">{{ item.repairDesc }}</span>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="part-item">
                      <span class="part-item-label">整改措施：</span>
                      <span class="part-item-value">{{
                        item.repairMethod
                      }}</span>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="part-item">
                      <span class="part-item-label">整改对象：</span>
                      <span class="part-item-value">{{
                        getDictValue(
                          'special_task_publish_scope',
                          item.repairCompany,
                        )
                      }}</span>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="part-item">
                      <span class="part-item-label">整改部门：</span>
                      <span class="part-item-value">{{
                        item.repairDeptName
                      }}</span>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="part-item">
                      <span class="part-item-label">责任人：</span>
                      <span class="part-item-value">{{
                        item.dutyPersonName
                      }}</span>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="part-item">
                      <span class="part-item-label">整改期限：</span>
                      <span class="part-item-value">{{ item.deadLine }}</span>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="part-item">
                      <span class="part-item-label">费用(元)：</span>
                      <span class="part-item-value">{{ item.cost }}</span>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="part-item">
                      <span class="part-item-label">是否实地巡查：</span>
                      <span class="part-item-value">{{
                        getDictValue('yn', item.patrol)
                      }}</span>
                    </div>
                  </el-col>
                </el-row>
                <!-- <div class="title">审批结果</div>
                <el-row :gutter="10">
                    <el-col :span="8">
                    <div class="part-item">
                      <span class="part-item-label">审批结果：</span>
                      <span class="part-item-value">{{
                        getDictValue('isPass', form.patrol)
                      }}</span>
                    </div>
                  </el-col>
                </el-row> -->
                <div v-if="item.checkTime" class="title">整改结果</div>
                <el-row v-if="item.checkTime" :gutter="10">
                  <el-col :span="24">
                    <div class="part-item">
                      <span class="part-item-label">现场照片：</span>
                      <span class="part-item-value"
                        ><FileList
                          :list="[]"
                          :showDownload="false"
                          fileType="picture"
                      /></span>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="part-item">
                      <span class="part-item-label">确认人：</span>
                      <span class="part-item-value">{{
                        item.checkPersonName
                      }}</span>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="part-item">
                      <span class="part-item-label">完成时间：</span>
                      <span class="part-item-value">{{ item.checkTime }}</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
            <!--            <div class="title">整改结果</div>-->
            <!--            <el-row :gutter="20">-->
            <!--              <el-col :span="8">-->
            <!--                <div class="item">-->
            <!--                  <span class="label">确认人：</span>-->
            <!--                  <span class="value"></span>-->
            <!--                </div>-->
            <!--              </el-col>-->
            <!--              <el-col :span="8">-->
            <!--                <div class="item">-->
            <!--                  <span class="label">完成时间：</span>-->
            <!--                  <span class="value"></span>-->
            <!--                </div>-->
            <!--              </el-col>-->
            <!--              <el-col :span="8">-->
            <!--                <div class="item">-->
            <!--                  <span class="label">现场照片：</span>-->
            <!--                  <span class="value"></span>-->
            <!--                </div>-->
            <!--              </el-col>-->
            <!--            </el-row>-->
            <div class="title">结果确认</div>
            <el-row :gutter="30">
              <el-col :span="8">
                <el-form-item label="审核结果" prop="parkId">
                  <el-radio-group v-model="form.auditResult">
                    <el-radio
                      v-for="(item, index) of dict['isPass']"
                      :key="index"
                      :value="item.value"
                      >{{ item.name }}</el-radio
                    >
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="审核意见" prop="type">
                  <el-input
                    class="data-input"
                    v-model="form.auditOpinion"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
    </div>
    <div class="bottom">
      <el-button @click="handleClose(false)" :loading="loading">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading"
        >确定</el-button
      >
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useDict } from '@/hooks/useDict'
import {
  getDepartmentList,
  getUserList,
} from '@/api/manager/systemManage/user.js'
import { tenantPageList } from '@/api/manager/dataManage/tenant.js'
import { useRoute, useRouter } from 'vue-router'
import {
  dangerCheckResult,
  dangerTaskList,
  getDangerList,
} from '@/api/manager/inspectionManage/rectificationManage.js'
import FileList from '@/components/fileList/index.vue'

const { dict, getDictValue } = useDict([
  'yn',
  'special_task_publish_scope',
  'isPass',
])
const router = useRouter()
const route = useRoute()

defineOptions({
  name: 'AddDialog',
})
const formRef = ref(null)
const form = ref({
  auditResult: '1',
  auditOpinion: '',
})
const emit = defineEmits(['close'])
const title = ref('')
const dialogVisible = ref(false)
const handleClose = (isFlash) => {
  form.value = {
    auditResult: '1',
    auditOpinion: '',
  }
  formRef.value.clearValidate()
  dialogVisible.value = false
  emit('close', isFlash)
  router.back()
}

const rules = ref({
  name: [{ required: true, message: '请选择所在园区', trigger: 'blur' }],
})

const loading = ref(false)
const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      // loading.value = true
      dangerCheckResult({
        dangerId: route.query.pkid,
        repairId: route.query.repairIds,
        auditResult: form.value.auditResult,
        auditOpinion: form.value.auditOpinion,
      }).then((res) => {
        if (res.success) {
          ElMessage.success('操作成功')
          handleClose(true)
        } else {
          ElMessage.error(res.message)
        }
        loading.value = false
      })
    } else {
      ElMessage.warning('请正确录入信息')
    }
  })
}

const detailForm = ref({})
const handleDetail = async () => {
  const res = await getDangerList({
    pageIndex: 1,
    pageSize: 9999,
    dangerIds: route.query.pkid,
  })
  detailForm.value = res.data.list[0]
  console.log(res)

  form.value.list = [{}, {}]
}

const recordList = ref([])
const handleRecordList = async () => {
  const res = await dangerTaskList({
    pkid: route.query.pkid,
  })
  console.log(res)
  recordList.value = res.data
}

// 资产公司部门、承租方单位
const departmentOptions = ref([])
const tenantOptions = ref([])
const initDepartmentOptions = async () => {
  const res = await getDepartmentList({ unitId: '10501' })
  if (!res.success) {
    ElMessage.error(res.message)
    return
  }
  departmentOptions.value = res.data
}
const initTenantOptions = async () => {
  const res = await tenantPageList({ pageIndex: 1, pageSize: 9999 })
  tenantOptions.value = res.data.list
}
// 资产公司人员、承租方人员
const departmentPerosnOptions = ref({})
const tenantPersonOptions = ref({})
const initDepartmentPersonOptions = async (val) => {
  if (
    departmentPerosnOptions.value[val] &&
    departmentPerosnOptions.value[val].length > 0
  ) {
    return
  }
  const res = await getUserList({
    pageIndex: 1,
    pageSize: 9999,
    unitId: '10501',
    deptId: val,
    userStatus: 1,
    type: ['1'],
  })
  departmentPerosnOptions.value[val] = res.data.list
}
const initTenantPersonOptions = async (val) => {
  if (
    tenantPersonOptions.value[val] &&
    tenantPersonOptions.value[val].length > 0
  ) {
    return
  }
  const res = await getUserList({
    pageIndex: 1,
    pageSize: 9999,
    type: ['2'],
    unitContent: val,
    userStatus: 1,
  })
  tenantPersonOptions.value[val] = res.data.list
}

// 修改是否产生费用
const handleChangeSFCSFY = () => {
  form.value.list.forEach((item) => {
    item.money = val
  })
}
// 修改整改对象
const handleChangeZGDX = (val) => {
  form.value.list.forEach((item) => {
    item.zgdx = val
    form.zgbm = ''
    item.zrr = ''
  })
}
onMounted(() => {
  initDepartmentOptions()
  initTenantOptions()
  if (route.query.pkid) {
    handleDetail()
    handleRecordList()
  }
})
</script>
<style lang="scss" scoped>
.detail-wrapper {
  width: 100%;
  height: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(72, 121, 238, 0.1);
  box-sizing: border-box;
  padding-top: 20px;
  .top {
    width: 100%;
    height: calc(100% - 70px);
    box-sizing: border-box;
    padding: 0 20px 20px 20px;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      display: none;
    }

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #151515;
      position: relative;
      padding-left: 10px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;

      &::before {
        content: ' ';
        position: absolute;
        left: 0;
        top: 50%;
        width: 4px;
        height: 16px;
        background: linear-gradient(0deg, #4575ee 0%, #6297f5 100%);
        border-radius: 2px;
        transform: translateY(-50%);
      }
      .el-button {
        margin-left: 10px;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 70px;
    box-sizing: border-box;
    border-top: 1px solid #d5deed;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.part {
  width: 100%;
  border: 1px solid #d5deed;
  border-radius: 4px;
  margin-bottom: 15px;
  &-top {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: aliceblue;
    &-item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
  }
  &-form {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 40px 0 20px;

    .content-item {
      margin-bottom: 20px;
      &-part {
        background: #f3f7fe;
        box-sizing: border-box;
        padding: 10px 20px;
        border-radius: 4px;
        .el-row {
          width: 100%;
        }
        .part-item {
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          margin: 10px 0;
          font-size: 14px;
          &-label {
            font-weight: 400;
            font-size: 14px;
            color: #333333;
          }
          &-value {
            font-weight: 400;
            font-size: 14px;
            color: #757575;
            flex: 1;
          }
        }
      }
    }
  }

  .img {
    width: 80px;
    height: 40px;
  }
}
.item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
  .label {
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    color: #333333;
    display: inline-block;
    margin-right: 10px;
    text-align: right;
  }
  .value {
    flex: 1;
    display: inline-block;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    color: #757575;
  }
}
</style>
